<template>
  <div class="homeInfo">
    <div class="homeInfoTitle">
      <span>{{$t('基本信息')}}</span>
    </div>
    <div class="homeInfocontent" id="homeInfo">
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('设备名称')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.name }}</el-col>
      </el-row>
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('设备型号')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.product }}</el-col>
      </el-row>
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('设备编号')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.id }}</el-col>
      </el-row>
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('软件版本')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.version }}</el-col>
      </el-row>
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('当前时间')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.date }}</el-col>
      </el-row>
      <el-row class="homeInfocontentTr">
        <el-col :span="11" class="homeInfocontentTd">{{$t('运行时间')}}</el-col>
        <el-col :span="13" class="homeInfocontentTd">{{ infoList.uptime }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { runTime, getTime, getInfo } from '@/api/home'
import { Loading } from 'element-ui'
import moment from 'moment'
export default {
  name: 'Info',
  data () {
    return {
      infoList: {
        id: '',
        name: '',
        product: '',
        version: '',
        date: '',
        uptime: ''
      },
      loadingInstance: null,
      timerRunTime: null,
      timerGetTime: null
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    if (this.timerRunTime) {
      clearInterval(this.timerRunTime) // 在Vue实例销毁前，清除我们的定时器
    }
    if (this.timerGetTime) {
      clearInterval(this.timerGetTime) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init () {
      if (document.getElementById('homeInfo')) {
        this.loadingInstance = Loading.service({
          target: '#homeInfo',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      this.listData()
      // runTime().then(res => {
      //   if (res.status === 0) {
      //     this.infoList.uptime = res.info[0].uptime.split('.')[0]
      //   }
      // }).catch(e => {
      //   if (this.timerRunTime) {
      //     clearInterval(this.timerRunTime)
      //   }
      // })
      this.timerRunTime = setInterval(() => {
        if (this.infoList.uptime) {
          let list = this.infoList.uptime.split(' ')
          let min = null
          if (list[2]) {
            min = list[2].split(':')
            let day = (Number(list[0]) * 24 * 60 * 60 * 1000 + Number(min[0]) * 60 * 60 * 1000 + Number(min[1]) * 60 * 1000 + Number(min[2]) * 1000) + 1000
            this.infoList.uptime = Math.floor(day / (24 * 60 * 60 * 1000)) + ' days, ' + moment((moment(new Date(day)).diff(new Date(0)) - 8 * 60 * 60 * 1000)).format('H:mm:ss')
          } else {
            min = list[0].split(':')
            let day = (Number(min[0]) * 60 * 60 * 1000 + Number(min[1]) * 60 * 1000 + Number(min[2]) * 1000) + 1000
            this.infoList.uptime = moment((moment(new Date(day)).diff(new Date(0)) - 8 * 60 * 60 * 1000)).format('H:mm:ss')
          }
        }
      }, 1000)
      // getTime().then(res => {
      //   if (res.status === 0) {
      //     this.infoList.date = res.info[0].date
      //   }
      // }).catch(e => {
      //   if (this.timerGetTime) {
      //     clearInterval(this.timerGetTime)
      //   }
      // })
      this.timerGetTime = setInterval(() => {
        if (this.infoList.date) {
          this.infoList.date = moment(+new Date(this.infoList.date) + 1000).format('YYYY-MM-DD HH:mm:ss')
        }
      }, 1000)
      // getInfo().then(res => {
      //   if (res.status === 0) {
      //     this.infoList = Object.assign(this.infoList, res.info[0])
      //   }
      // })
    },
    listData () {
      Promise.all([runTime(), getTime(), getInfo()]).then(res => {
        if (res[0].status === 0) {
          this.infoList.uptime = res[0].info[0].uptime.split('.')[0]
        }
        if (res[1].status === 0) {
          this.infoList.date = res[1].info[0].date
        }
        if (res[2].status === 0) {
          this.infoList = Object.assign(this.infoList, res[2].info[0])
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      }).catch(e => {
        if (this.timerRunTime) {
          clearInterval(this.timerRunTime)
        }
        if (this.timerGetTime) {
          clearInterval(this.timerGetTime)
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
      // runTime().then(res => {
      //   if (res.status === 0) {
      //     this.infoList.uptime = res.info[0].uptime.split('.')[0]
      //   }
      // })
      // getTime().then(res => {
      //   if (res.status === 0) {
      //     this.infoList.date = res.info[0].date
      //   }
      // })
      // getInfo().then(res => {
      //   if (res.status === 0) {
      //     this.infoList = Object.assign(this.infoList, res.info[0])
      //   }
      // })
    }
  }
}
</script>
<style lang="less">
.homeInfo {
  overflow-x: auto;
}

.homeInfoTitle {
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
  color: #303133;
}

.homeInfocontent {
  min-width: 382px;
  padding: 15px 20px;
}

.homeInfocontentTr {
  line-height: 38px;
}

.homeInfocontentTd {
  padding: 0px 20px;
}
</style>
